<template>
  <view style="background-color: #f7f7f7">
    <view class="movie" @tap="sheep.$router.go(`/pages/movie/my-ticket`)"
      >电影卡订单
      <view class="itemp">
        <view class="left" style="background-color: #ffe4e1"></view>
        <view
          class="right"
          style="
            background-color: #ffb6c1;
            display: flex;
            align-items: center;
            justify-content: center;
          "
        >
          <image
            style="width: 50rpx; height: 50rpx"
            src="https://ihuanggang-live-1323882773.cos.ap-nanjing.myqcloud.com//image/2025/03/05/806cda87c71a405eadfa0f22795b1037.png"
          ></image>
        </view>
      </view>
    </view>
    <view class="ss-coupon-menu-wrap">
      <view
        class="item"
        v-for="item in menuItems"
        :key="item.title"
        @tap="item.action"
      >
        <span>{{ item.title }}</span>
        <view style="margin-top: 14rpx; font-size: 40rpx">{{
          item.value
        }}</view>
        <view class="itemp">
          <view
            class="left"
            :style="{ backgroundColor: item.leftColor }"
          ></view>
          <view class="right" :style="{ backgroundColor: item.rightColor }">
            <text :class="item.icon"></text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
/**
 * 装修组件 - 优惠券菜单
 */
import sheep from "@/sheep";
import { computed, ref, watchEffect } from "vue";

const userInfo = computed(() => sheep.$store("user").userInfo);

const menuItems = ref([
  {
    title: "我的卡片",
    leftColor: "#fdeccb",
    rightColor: "#ffbe59",
    icon: "sicon-goods-list",
    action: () => sheep.$router.go("/pages/coupon/list"),
  },
  {
    title: "余额",
    leftColor: "#caf7e8",
    rightColor: "#71d9b6",
    icon: "sicon-edit",
    value: userInfo.value.price,
    action: () => sheep.$router.go("/pages/user/wallet/money"),
  },
  {
    title: "积分",
    leftColor: "#ffcacd",
    rightColor: "#fe443e",
    icon: "_icon-check-round-o",
    value: userInfo.value.integral,
    action: () => sheep.$router.go("/pages/user/wallet/amountprice"),
  },
  {
    title: "礼品册",
    leftColor: "#c4edfb",
    rightColor: "#5bc1ff",
    icon: "_icon-info-o",
    action: () => sheep.$router.go("/pages/user/wallet/giftbooklet"),
  },
]);

watchEffect(() => {
  // 更新 menuItems 中依赖 userInfo 的值
  menuItems.value[1].value = userInfo.value.price || 0;
});
</script>

<style lang="scss" scoped>
.movie {
  height: 120rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding-left: 16rpx;
  padding-top: 10rpx;
  margin-bottom: 20rpx;
  font-weight: 700;
  font-size: 26rpx;
  position: relative;
  width: 100%;
  overflow: hidden;
}
.ss-coupon-menu-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.item {
  height: 120rpx;
  width: 340rpx;
  background-color: #fff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  box-sizing: border-box;
  padding-left: 16rpx;
  padding-top: 10rpx;
  font-weight: 700;
  font-size: 26rpx;
  position: relative;
  overflow: hidden;
}
.itemp {
  position: absolute;
  width: 100rpx;
  height: 60rpx;
  right: 0;
  bottom: 0;
}
.left {
  width: 24rpx;
  height: 40rpx;
  position: absolute;
  left: 0;
  bottom: 0;
  border-top-left-radius: 14rpx; /* 设置左上角的圆角 */
}
.right {
  width: 80rpx;
  height: 60rpx;
  line-height: 60rpx;
  position: absolute;
  right: 0;
  bottom: 0;
  color: #fff;
  font-size: 36rpx;
  text-align: center;
  border-top-left-radius: 20rpx; /* 设置左上角的圆角 */
}
</style>
